{% extends "../layouts/base.twig" %}

{% block title %}聊天室{% endblock %}

{% block styles %}
    <link href="/static/css/cjf.css" rel="stylesheet">
    <link href="/static/IM/chatinfo.css?20161225" rel="stylesheet">
    <link href="//at.alicdn.com/t/font_grrfmtx6iy2mlsor.css" rel="stylesheet">

{% endblock %}

{% block body %}
    <div class="center-main">
        <div class="col-lg-2 col-md-3 col-sm-4 hidden-xs main left-right" id="userlist_content">
        </div>
        <div class="col-lg-10 col-md-9 col-sm-8 main">
            <div class="title">
                <div class="pull-left title-nick">
                    公共聊天室
                </div>
                <div class="pull-right">
                </div>
            </div>

            <!-- contents begin -->
            <div class="chat-contents">
                <ul id="chat-content">

                </ul>
            </div>
            <!-- contents end -->


            <div class="chat-send-messsage">
                <!-- tools begin -->
                <div class="chat-tools">
                    <ol class="breadcrumb">
                        <li><i id="btn-emoji" class="iconfont icon-emoji" title="表情"></i></li>
                        <li><i id="btn-skin" class="iconfont icon-skin" title="换肤"></i></li>
                        <li><i id="btn-image" class="iconfont icon-image" title="图片"></i></li>
                    </ol>
                </div>
                <!-- tools end -->
                <form name="messageForm">
                    <textarea name="message" id="text-message" placeholder="按Enter键发送消息"></textarea>
                    <div class="enter-description">
                        <span class="text-info"> [Enter发送] </span> 您还可以输入
                        <span class="text-success"></span>个字符
                    </div>
                    <div style="position: absolute;bottom:50px;right: 30px;">
                        <input class="btn btn-success btn-speech" type="button" value="语音发送" onclick="changeRecord()">
                        <input class="btn btn-success" type="button" value="发送" onclick="sendmessage()">
                    </div>
                </form>
            </div>
        </div>

        <!-- context menu begin-->
        <div id="k-c-m-r-m" class="k-c-m">
            <ul class="k-c-m-ul">
                <li id="cm-revoke" class="k-c-m-item">
                    <div>
                        <i class="iconfont icon-back57"></i>
                        <span>撤销</span>
                    </div>
                </li>
            </ul>
        </div>

        <div id="k-c-m-l-h" class="k-c-m">
            <ul class="k-c-m-ul">
                <li id="cm-closemessage" class="k-c-m-item">
                    <div>
                        <i class="iconfont icon-iconclosemessage"></i>
                        <span>屏蔽此人发言</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>

{% endblock %}

{% block scripts %}
    <script id="userlist" type="text/html">
        <div class="title">
            <span>在线列表</span><span class="badge pull-right" id="online-num"><%= users.length %></span>
        </div>
        <ul class="list-group online-ul">
            <% for(var i=0;i
            <users.length ;i++){ %>
                <li data-unique="123" class="list-group-item">
                    <img class="img-circle" width="20"
                         src="http://cdn.gfzq.cn/jys_client/web/assets/images/manager_default_3cca001c40.png" alt="">
                    <span><%= users[i].username %></span><span class="unread badge pull-right">0</span>
                </li>
                <% } %>
        </ul>
    </script>
    <script id="message-tpl" type="text/html">
        <li data-id="1">
            <div class="chat-main <% if(sender&&sender.id=={{ user.Id }}){ %> all-right <% }else{ %> all-left <% }%>">
                <div class="chat-head">
                    <small>1111</small>
                    <span class="chat-nick"><%=sender?sender.username:''%></span>
                    <small><%=time%></small>
                </div>
                <div class="chat-body">
                    <img class="img-circle chat-head-logo" width="35"
                         src="http://cdn.gfzq.cn/jys_client/web/assets/images/manager_default_3cca001c40.png">
                    <div class="triangle"></div>
                    <div class="chat-content"><%=message%></div>
                    <div class="chat-content chat-yuyin"><i class="iconfont icon-shengyin-3"></i></div>
                </div>
            </div>
        </li>
    </script>
    <script src="/static/js/template.js"></script>
    <script src="/static/js/recorder.js"></script>
    <script>
        var ws;
        var isPlay = false;
        var audio_context;
        var recorder;

        function changeRecord() {
            isPlay = !isPlay;
            if (isPlay) {
                recorder.record();
            } else {
                recorder.clear()
            }
        }

        function sendmessage() {
            var value = {
                msg_type: 1,
                message: $('#text-message').val()
            }
            ws.send(JSON.stringify(value))
        }

        $(function () {

            function wsinit() {
                if (ws) {
                    return false;
                }
                ws = new WebSocket("ws://localhost:8070/ws");
                ws.onopen = function (evt) {
                };
                ws.onclose = function (evt) {
                    ws = null;
                };
                ws.onmessage = function (evt) {
                    var result = JSON.parse(evt.data);
                    console.log(result);
                    switch (result.msg_type) {
                        case 0://用户列表
                            var data = template("userlist", result);
                            $("#userlist_content").html(data);
                            break;
                        case 1:
                            var data = template("message-tpl", result);
                            $("#chat-content").append(data);
                            break;
                    }
                };
                ws.onerror = function (evt) {
                };
                return false;
            }

            wsinit();

        });
    </script>
{% endblock %}